<template>
  <a-modal
    v-model:open="visible"
    title="同步日志详情"
    width="800px"
    :footer="null"
  >
    <div class="log-detail" v-if="log">
      <!-- 基本信息 -->
      <a-descriptions title="执行信息" :column="2" bordered size="small">
        <a-descriptions-item label="执行ID">
          <code>{{ log.execution_id }}</code>
        </a-descriptions-item>
        <a-descriptions-item label="执行状态">
          <a-badge
            :status="getExecutionStatusBadge(log.status)"
            :text="getExecutionStatusText(log.status)"
          />
        </a-descriptions-item>
        <a-descriptions-item label="开始时间">
          {{ formatDateTime(log.start_time) }}
        </a-descriptions-item>
        <a-descriptions-item label="结束时间">
          {{ formatDateTime(log.end_time) }}
        </a-descriptions-item>
        <a-descriptions-item label="执行时长">
          {{ formatDuration(log.duration) }}
        </a-descriptions-item>
        <a-descriptions-item label="任务名称">
          {{ log.sync_task?.task_name || '-' }}
        </a-descriptions-item>
      </a-descriptions>

      <!-- 执行统计 -->
      <a-descriptions
        title="执行统计"
        :column="4"
        bordered
        size="small"
        style="margin-top: 24px"
      >
        <a-descriptions-item label="总记录数">
          <a-statistic :value="log.total_records" />
        </a-descriptions-item>
        <a-descriptions-item label="处理记录数">
          <a-statistic :value="log.processed_records" />
        </a-descriptions-item>
        <a-descriptions-item label="成功记录数">
          <a-statistic :value="log.success_records" style="color: #52c41a" />
        </a-descriptions-item>
        <a-descriptions-item label="失败记录数">
          <a-statistic :value="log.failed_records" style="color: #ff4d4f" />
        </a-descriptions-item>
      </a-descriptions>

      <!-- 成功率 -->
      <div style="margin-top: 24px">
        <a-card title="执行成功率" size="small">
          <div class="success-rate">
            <a-progress
              :percent="successRate"
              :status="successRate === 100 ? 'success' : successRate === 0 ? 'exception' : 'normal'"
              :stroke-color="getProgressColor(successRate)"
            />
            <div class="rate-text">
              {{ successRate.toFixed(1) }}% ({{ log.success_records }}/{{ log.total_records }})
            </div>
          </div>
        </a-card>
      </div>

      <!-- 错误信息 -->
      <div v-if="log.error_message" style="margin-top: 24px">
        <a-alert
          message="错误信息"
          :description="log.error_message"
          type="error"
          show-icon
        />
      </div>

      <!-- 执行详情 -->
      <div v-if="log.execution_details && Object.keys(log.execution_details).length > 0" style="margin-top: 24px">
        <a-card title="执行详情" size="small">
          <a-descriptions :column="1" bordered size="small">
            <a-descriptions-item
              v-for="(value, key) in log.execution_details"
              :key="key"
              :label="key"
            >
              <template v-if="typeof value === 'object'">
                <pre>{{ JSON.stringify(value, null, 2) }}</pre>
              </template>
              <template v-else>
                {{ value }}
              </template>
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  log: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:visible'])

// 计算属性
const visible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

const successRate = computed(() => {
  if (!props.log || props.log.total_records === 0) return 0
  return (props.log.success_records / props.log.total_records) * 100
})

// 工具函数
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

const formatDuration = (seconds) => {
  if (!seconds) return '-'
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = seconds % 60

  if (hours > 0) {
    return `${hours}小时${minutes}分钟${secs}秒`
  } else if (minutes > 0) {
    return `${minutes}分钟${secs}秒`
  } else {
    return `${secs}秒`
  }
}

const getExecutionStatusBadge = (status) => {
  const statusMap = {
    running: 'processing',
    success: 'success',
    failed: 'error'
  }
  return statusMap[status] || 'default'
}

const getExecutionStatusText = (status) => {
  const statusMap = {
    running: '运行中',
    success: '成功',
    failed: '失败'
  }
  return statusMap[status] || status
}

const getProgressColor = (rate) => {
  if (rate === 100) return '#52c41a'
  if (rate >= 80) return '#1890ff'
  if (rate >= 60) return '#faad14'
  if (rate >= 40) return '#fa8c16'
  return '#ff4d4f'
}
</script>

<style scoped>
.log-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.success-rate {
  padding: 16px;
}

.rate-text {
  text-align: center;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
}

:deep(.ant-statistic-content) {
  font-size: 16px;
  font-weight: 500;
}

pre {
  background: #f5f5f5;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
}

code {
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}
</style>